:root {
  --bg-color: #1f1c2a;
  --bg-secondary-color: #242131;
  --color-primary: #7e57c2;
  --color-lightGrey: #3a344d;
  --color-grey: #453e5c;
  --color-darkGrey: #181621;
  --color-error: #ff8da1;
  --color-success: #81c784;
  --grid-maxWidth: 120rem;
  --grid-gutter: 2rem;
  --font-size: 1.6rem;
  --font-color: #e6d8f7;
  --font-family-sans: Arial, Helvetica, sans-serif;
  --font-family-mono: "Courier New", Courier, monospace;
}
.flex {display: flex}
.flex-col {flex-direction: column}
.flex-1 {flex: 1}
.max-w-lg {max-width: 512px}
.size-2 {width: 2rem; height: 2rem}
.size-3 {width: 3rem; height: 3rem}
.size-12 {width: 12rem; height: 12rem}
.p-1 {padding: 1rem}
.mb-1 {margin-bottom: 1rem}
.mb-2 {margin-bottom: 2rem}
.mt-auto {margin-top: auto}
.mx-auto {margin: 0 auto}
.text-base {color: var(--font-color) !important}
.z-10 {z-index: 10}
@keyframes hidden {to {opacity: 0; display: none}}
#success, #error {animation: hidden 12s forwards}
